<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
  </head>
  <body>
    <script>
      // svg 矢量图形 - 属于 dom - 可以使用 css 和 js 操作
      // canvas - 位图 - 不能使用 css 和 js 操作

      // fill 填充色 stroke 边框色
      // x1 y1 x2 y2 起始和结束坐标 也可用style
    </script>
    <svg width="300" height="300">
      <rect width="50" height="50" style="fill: red; stroke: blue" />
      <line x1="100" y1="100" x2="150" y2="150" style="stroke: blue" />
      <circle
        cx="200"
        cy="200"
        r="20"
        stroke="green"
        stroke-width="2"
        fill="red"
      />
    </svg>
  </body>
</html>
